<template>
    <div class="root">
        <div class="title">
            <span style="font-weight: 600; font-size: 20px;">添加员工</span>
        </div>        
        <div class="content">
            <el-form ref="form" style="width: 500px" :rules="rules" :model="formData" label-width="120px">
                <el-form-item label="员工姓名" prop="name">
                    <el-input v-model="formData.name"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="username">
                    <el-input v-model="formData.username"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="formData.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="formData.sex" placeholder="请选择性别">
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号码" prop="idNumber">
                    <el-input v-model="formData.idNumber"></el-input>
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button @click="cancel" plain>取消</el-button>
                    <el-button style="background-color: #6777ef; color: #fff; border: none;" @click="submit" plain>确认保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import api from '@/api/request.js'
import router from '@/router'
export default {
    data() {
        return {
            formData: {
                name: "",
                username: "",
                phone: "",
                sex: "",
                idNumber: ""
            },
            rules: {
                name: [
                    { 
                        required: true, 
                        message: "请输入员工姓名", 
                        trigger: "blur" 
                    }
                ],
                username: [
                    { 
                        required: true, 
                        message: "请输入账号", 
                        trigger: "blur" 
                    }
                ],
                phone: [
                    { 
                        required: true, 
                        message: "请输入电话号码", 
                        trigger: "blur" 
                    }
                ],
                sex: [
                    { 
                        required: true, 
                        message: "性别", 
                        trigger: "blur" 
                    }
                ],
                idNumber: [
                    { 
                        required: true, 
                        message: "请输入身份证号码", 
                        trigger: "blur" 
                    }
                ]
            }
        }
    },
    methods: {
        submit(){
            this.$refs.form.validate(valid => {
                if (valid) {
                    api.addEmployeeApi(this.formData).then(res => {
                        if (String(res.data.code) === '1') {
                            this.$message.success(res.data.data);
                            // 登录成功后进行路由跳转
                            router.push('/user');
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    }).catch(error => {
                        console.log(error);
                        this.$message.error('出错啦');
                    });
                } else {
                    this.$message.error('你没看见红框？？？');
                }
            });
        },
        cancel(){
            this.$message.success("已取消");
            router.push('/user');
        }
    }
}
</script>

<style scoped>
    .root {
        padding: 20px;
    }

    .content {
        width: 80%;
        margin: 0 auto;
        padding: 20px;
    }
</style>